<template>
	<div class="animated-number-demo">
		<div class="demo-header">
			<h1>数字动画组件演示</h1>
			<p>简单可靠的数字变化动画效果</p>
		</div>

		<!-- 统计卡片 -->
		<div class="stats-grid">
			<div
				v-for="stat in stats"
				:key="stat.label"
				class="stat-card"
			>
				<div
					class="stat-icon"
					:style="{ background: stat.color }"
				>
					<component :is="stat.icon" />
				</div>
				<div class="stat-content">
					<div class="stat-value">
						<NexAnimatedNumber
							:value="stat.value"
							:duration="1500"
							:decimals="stat.decimals || 0"
							:prefix="stat.prefix"
							:suffix="stat.suffix"
						/>
					</div>
					<div class="stat-label">{{ stat.label }}</div>
					<div
						class="stat-trend"
						:class="stat.trend"
					>
						<ElIcon>
							<component :is="stat.trend === 'up' ? 'CaretTop' : 'CaretBottom'" />
						</ElIcon>
						<span>{{ stat.change }}%</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 控制面板 -->
		<div class="control-panel">
			<ElCard>
				<template #header>
					<div class="card-header">
						<span>控制面板</span>
						<ElButton
							type="primary"
							@click="randomizeValues"
						>
							随机更新数据
						</ElButton>
					</div>
				</template>

				<div class="demo-examples">
					<div class="example-item">
						<h3>基础用法</h3>
						<div class="example-display">
							<NexAnimatedNumber :value="basicValue" />
						</div>
						<ElButton @click="basicValue = Math.floor(Math.random() * 100000)">
							更新
						</ElButton>
					</div>

					<div class="example-item">
						<h3>货币格式</h3>
						<div class="example-display">
							<NexAnimatedNumber
								:value="moneyValue"
								:decimals="2"
								prefix="¥"
								separator=","
							/>
						</div>
						<ElButton @click="moneyValue = Math.random() * 100000">
							更新
						</ElButton>
					</div>

					<div class="example-item">
						<h3>百分比</h3>
						<div class="example-display">
							<NexAnimatedNumber
								:value="percentValue"
								:decimals="1"
								suffix="%"
							/>
						</div>
						<ElButton @click="percentValue = Math.random() * 100">
							更新
						</ElButton>
					</div>
				</div>
			</ElCard>
		</div>
	</div>
</template>

<script setup lang="ts">
import NexAnimatedNumber from '@/components/nex-animated-number/index.vue'
import { User, TrendCharts, ShoppingCart, DataAnalysis } from '@element-plus/icons-vue'

const basicValue = ref(12345)
const moneyValue = ref(88888.88)
const percentValue = ref(75.5)

const stats = ref([
	{
		label: '总用户数',
		value: -125680,
		icon: User,
		color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
		trend: 'up',
		change: 12.5,
	},
	{
		label: '月收入',
		value: -328900,
		prefix: '¥',
		icon: TrendCharts,
		color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
		trend: 'up',
		change: 8.3,
	},
	{
		label: '订单数',
		value: -45678,
		icon: ShoppingCart,
		color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
		trend: 'down',
		change: 3.2,
	},
	{
		label: '转化率',
		value: -68.5,
		decimals: 1,
		suffix: '%',
		icon: DataAnalysis,
		color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
		trend: 'up',
		change: 5.7,
	},
])

// 随机更新数据
const randomizeValues = () => {
	stats.value[0].value = (Math.random() - 0.5) * 500000
	stats.value[1].value = (Math.random() - 0.5) * 500000
	stats.value[2].value = (Math.random() - 0.5) * 100000
	stats.value[3].value = (Math.random() - 0.5) * 200
}

// 自动更新演示
onMounted(() => {
	setInterval(() => {
		const index = Math.floor(Math.random() * stats.value.length)
		const stat = stats.value[index]
		
		if (index === 3) {
			stat.value = (Math.random() - 0.5) * 200
		}
		else {
			const change = (Math.random() - 0.5) * 0.2 * Math.abs(stat.value)
			stat.value = stat.value + change
		}
	}, 5000)
})
</script>

<style scoped lang="scss">
.animated-number-demo {
	padding: 20px;
	max-width: 1400px;
	margin: 0 auto;
}

.demo-header {
	text-align: center;
	margin-bottom: 40px;

	h1 {
		font-size: 2.5rem;
		font-weight: 700;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		margin-bottom: 10px;
	}

	p {
		font-size: 1.1rem;
		color: #666;
	}
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}

.stat-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	display: flex;
	gap: 20px;
	align-items: center;

	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	}
}

.stat-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 28px;
	flex-shrink: 0;
}

.stat-content {
	flex: 1;
}

.stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: #303133;
	margin-bottom: 8px;
}

.stat-label {
	font-size: 0.9rem;
	color: #909399;
	margin-bottom: 8px;
}

.stat-trend {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 600;

	&.up {
		background: rgba(103, 194, 58, 0.1);
		color: #67c23a;
	}

	&.down {
		background: rgba(245, 108, 108, 0.1);
		color: #f56c6c;
	}
}

.control-panel {
	margin-top: 40px;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.demo-examples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
}

.example-item {
	padding: 20px;
	background: #f5f7fa;
	border-radius: 12px;
	text-align: center;

	h3 {
		font-size: 1.1rem;
		color: #303133;
		margin-bottom: 16px;
	}
}

.example-display {
	font-size: 2.5rem;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 16px;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
